<template>
	<nav class='rel nosel' :style='{width}'>
		<a-menu class='abs_full oys scrollbar' mode='inline' :inlineIndent='10' :selectedKeys='selectedKeys' :openKeys='openKeys' >
			<template v-for='(v, i) of data' :key='v.path'>
				<template v-if='!v.children'>
					<a-menu-item :key='v.path' class='fxm' :url='v.path' @click='onClick(v)'>
						<i :class='v.icon'></i><span>{{ v.title }}</span>
					</a-menu-item>
				</template>
				<template v-else>
					<SubMenu :menu='v' :key='v.path' @click='onClick' />
				</template>
			</template>
		</a-menu>
	</nav>
</template>

<script>
	import { useRouter } from 'vue-router'
	import { Menu } from 'ant-design-vue'
	app.use(Menu)
	/* --------------------------- props --------------------------- */
	/* --------------------------- 递归菜单组件 --------------------------- */
	const SubMenu = {
		name: 'SubMenu',
		props: {
			menu: { type: Object, default: {} }
		},
		template: `
			<a-sub-menu :key='menu.name' v-bind='$attrs'>
				<template #title><i :class='menu.icon'></i><span>{{ menu.title }}</span></template>
				<template v-for='(v,i) of menu.children' :key='i'>
					<template v-if='!v.children'><a-menu-item :key='v.path' :url='v.path' @click='onClick(v)'><i :class='v.icon'></i><span>{{ v.title }}</span></a-menu-item></template>
					<template v-else> <SubMenu :menu='v' :key='v.path' /></template>
				</template>
			</a-sub-menu>
		`,
		emits: {
			click: null
		},
		setup(props,ctx){
			return {
				onClick: value => ctx.emit('click', value)
			}
		}
	}
	
	export default {
		components:{ SubMenu },
		props: {
			data: { type:Array, default:[] },
			selectedKeys: { type:Array, default:[] },
			openKeys: { type:Array, default:[] },
			width: { type:String, default: '200px'},
		},
		emits: {
			click: null
		},
		setup(props, ctx){
			return {
				onClick : value => ctx.emit('click', value)
			}
		}
	}
</script>
<style>
	.ant-menu-title-content,.ant-menu-item{display:flex; align-items:center}
	.ant-menu-item,.ant-menu-submenu-title{
		height: 36px!important;line-height: 36px!important;
		margin: 0!important;
	}
	.ant-menu-title-content span{font-size:13px}
	.ant-menu-title-content i{margin-right:5px;}
	.ant-menu-submenu-title .ant-menu-title-content{font-weight:bold;}
</style>